<style lang="less" scoped>
    .produce {
        width: 100%;
        height: auto;
        overflow: hidden;
        text-align: center;
        padding: 8px;
        display: flex;
        .left{
            flex-grow: 1;
            right: 410px;
        }
        .right{
            width: 400px;
            min-width: 400px;
            margin-left: 10px;
        }
        .example-code-more {
            position: absolute;
            bottom: 0;
            left: 4px;
            right: 4px;
            text-align: center;
            cursor: pointer;
            padding: 5px 0;
            &:after{
                content: "";
                width: 100%;
                height: 100%;
                position: absolute;
                bottom: 0;
                left: 0;
                z-index: 1;
                box-shadow: inset 0 -15px 30px #fff;
            }
            i {
                position: relative;
                top: 5px;
                z-index: 2;
                &:hover {
                    color: #5cb85c;
                }
            }
        }
        .example-split {
            display: block;
            position: absolute;
            top: 0;
            bottom: 0;
            border: 1px dashed #eee;
        }
        .workorderitem{
            width: auto;
            text-align: left;
        }
    }
</style>
<template>
    <div class="produce">
        <div class="left">
            <my-card cardtitle="今日计划" :showright="false">
                <div slot="mycardtitle" style="margin-left:20px;flex-grow:1;display: flex;justify-content:flex-end;">
                    <Button type="default" icon="loop" @click="refresh"></Button>
                    <!--<Button type="default" icon="plus-round" @click="add" style="margin-left: 10px">添加工单</Button>-->
                    <Button type="default" icon="clipboard" @click="editJihua" style="margin-left: 10px">调整计划</Button>
                </div>
                <Table border :columns="columns" :data="data"></Table>
            </my-card>
            <div style="display: flex;margin-top: 10px">
                <my-card cardtitle="生产中工单" :showright="false">
                    <div slot="mycardtitle" style="margin-left:20px;flex-grow:1;display: flex;justify-content:flex-end;">
                        <!--<Button type="default" icon="loop" @click="refresh"></Button>-->
                    </div>
                    <Table border :columns="sczcolumns" :data="sczdata"></Table>
                </my-card>
            </div>
        </div>
        <div class="right">
            <my-card cardtitle="工单列表" :showright="false">
                <div slot="mycardtitle" style="margin-left:20px;flex-grow:1;display: flex;justify-content:flex-end;">
                    <Button type="default" @click="addjihua" v-if="social.length > 0">加入计划</Button>
                    <Button type="default" icon="loop" @click="refresh" style="margin-left: 10px"></Button>
                    <!--<Button type="default" icon="clipboard" @click="creatgd" style="margin-left: 10px">新建工单</Button>-->
                    <Button type="default" icon="clipboard" @click="clipboard" style="margin-left: 10px">详情</Button>
                </div>
                <div style="transition: 0.3s all;overflow: hidden;min-height: 300px;" :style="ulstyle ? { height: '400px',marginBottom: '5px' } : { height: gdlbheight,marginBottom: '10px' }">
                    <ul style="text-align: left;overflow: hidden;margin-bottom: 20px" id="gdlb">
                        <li style="height: 32px;line-height: 32px">
                            <div style="display: flex;justify-content:space-between;">
                                <span style="width: 20%;">工单编号</span>
                                <span style="width: 20%;">产品编号</span>
                                <span style="width: 20%;">数量</span>
                                <span style="width: 20%;">规格</span>
                                <!--<span style="width: 50px;" :style="work.type | worktypestyle">{{ work.type | worktype }}</span>-->
                            </div>
                        </li>
                        <CheckboxGroup v-model="social">
                            <li v-for="work in workorder" v-if="work.type == '3'" style="height: 32px;line-height: 32px">
                                <div style="display: flex;justify-content:space-between;">
                                    <Checkbox :disabled="!role" style="width: 20%;" :label="work.id">{{ work.nub }}</Checkbox>
                                    <span style="width: 20%;">{{ work.pnub }}</span>
                                    <span style="width: 20%;">{{ work.number + work.unit }}</span>
                                    <span style="width: 20%;">{{ work.norm }}</span>
                                </div>
                            </li>
                        </CheckboxGroup>
                    </ul>
                </div>
                <div class="example-code-more" @click="seemore">
                    <i v-if="ulstyle" class="ivu-icon ivu-icon-ios-arrow-down"></i>
                    <i v-else="ulstyle" class="ivu-icon ivu-icon-ios-arrow-up"></i>
                    <button type="button" class="ivu-btn ivu-btn-text" style="display: none;">
                        <span>查看</span>
                    </button>
                </div>
            </my-card>
            <Card :bordered="false" style="margin-top: 10px;text-align: left">
                <p slot="title">已生产工单</p>
                <ul style="text-align: left;overflow: hidden;margin-bottom: 20px">
                    <li style="height: 32px;line-height: 32px">
                        <div style="display: flex;justify-content:space-between;">
                            <span style="width: 20%;">工单编号</span>
                            <span style="width: 20%;">产品编号</span>
                            <span style="width: 20%;">数量</span>
                            <span style="width: 20%;">规格</span>
                            <!--<span style="width: 50px;" :style="work.type | worktypestyle">{{ work.type | worktype }}</span>-->
                        </div>
                    </li>
                    <li v-for="work in yscdata" v-if="work.type == '1'" style="height: 32px;line-height: 32px">
                        <div style="display: flex;justify-content:space-between;">
                            <span style="width: 20%;">{{ work.nub }}</span>
                            <span style="width: 20%;">{{ work.pnub }}</span>
                            <span style="width: 20%;">{{ work.number + work.unit }}</span>
                            <span style="width: 20%;">{{ work.norm }}</span>
                            <!--<span style="width: 50px;" :style="work.type | worktypestyle">{{ work.type | worktype }}</span>-->
                        </div>
                    </li>
                </ul>
            </Card>
        </div>
        <Modal
            v-model="jihuaedit"
            @on-ok="jihuaupdate"
            title="调整计划">
            <DragableTable refs="table1" :columnsList="columnsList" :tableData="data" :start="handleOnstart1" :end="handleOnend1" ></DragableTable>
        </Modal>
    </div>
</template>
<script>
    import CardTable from '../components/cardTable.vue'
    import MyCard from '../components/myCard.vue'
    import DragableTable from '../components/dragableTable.vue';

    export default {
        name: 'produce',
        data () {
            return {
                role: false,
                jihuaedit: false,
                columnsList: [
                    {
                        title: '序号',
                        type: 'index',
                        width: 80,
                        align: 'center'
                    },
                    {
                        title: '工单编号',
                        key: 'nub'
                    },
                    {
                        title: '产品编号',
                        key: 'pnub'
                    },
                    {
                        title: '拖拽',
                        width: 90,
                        align: 'center',
                        render: (h) => {
                            return h(
                                'Icon',
                                {
                                    props: {
                                        type: 'arrow-move',
                                        size: 24
                                    }
                                }
                            );
                        }
                    }
                ],
                tableData: [],
                tableindex: [],
                table1: {
                    hasDragged: false,
                    isDragging: false,
                    oldIndex: 0,
                    newIndex: 0,
                    draggingRecord: []
                },
                social: [],
                sczcolumns: [
                    {
                        title: '工单编号',
                        key: 'nub',
                        width: 160
                    },
                    {
                        title: '产品编号',
                        key: 'pnub'
                    },
                    {
                        title: '产品规格',
                        key: 'norm'
                    },
                    {
                        title: '数量',
                        key: 'number',
                        width: 100,
                        render: (h, params) => {
                            return h('span', params.row.number + params.row.unit)
                        }
                    },
                    {
                        title: '状态',
                        key: 'type',
                        width: 130,
                        render: (h, params) => {
                            let text = '未知'
                            let style = {
                                color: 'red'
                            }
                            switch (params.row.type) {
                                case '1':
                                    text = '已生产';
                                    style.color = '#ccc'
                                    break;
                                case '3':
                                    text = '未生产';
                                    style.color = '#0000ff'
                                    break;
                                case '2':
                                    text = '计划中';
                                    style.color = '#00ff00'
                                    break;
                                case '5':
                                    text = '生产中';
                                    style.color = '#66eeff'
                                    break;
                                case '4':
                                    text = '暂停';
                                    style.color = 'yellow'
                                    break;
                            }
                            return h('span', {
                                style: style
                            }, text)
                        }
                    }
                ],
                yscdata: [],
                columns: [
                    {
                        title: '工单编号',
                        key: 'nub',
                        width: 160
                    },
                    {
                        title: '产品编号',
                        key: 'pnub'
                    },
                    {
                        title: '产品规格',
                        key: 'norm'
                    },
                    {
                        title: '数量',
                        key: 'number',
                        width: 100,
                        render: (h, params) => {
                            return h('span', params.row.number + params.row.unit)
                        }
                    },
                    {
                        title: '状态',
                        key: 'type',
                        width: 130,
                        render: (h, params) => {
                            let text = '未知'
                            let style = {
                                color: 'red'
                            }
                            switch (params.row.type) {
                                case '1':
                                    text = '已生产';
                                    style.color = '#ccc'
                                    break;
                                case '3':
                                    text = '未生产';
                                    style.color = '#0000ff'
                                    break;
                                case '2':
                                    text = '计划中';
                                    style.color = '#00ff00'
                                    break;
                            }
                            return h('span', {
                                style: style
                            }, text)
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 100,
                        render: (h, params) => {
                            return h('div', {
                                style: {
                                    display: 'flex',
                                    justifyContent: 'center'
                                }
                            }, [
                                h('Button', {
                                    props: {
                                        type: 'text'
                                    },
                                    on: {
                                        'click': () => {
                                            if (!this.role) {
                                                this.$Notice.error({
                                                    title: '权限不足!',
                                                    desc: ''
                                                });
                                                return
                                            }
                                            let shunxu = JSON.parse(JSON.stringify(this.tableindex))
                                            shunxu.splice(params.row._index, 1)
                                            let shunxu2 = ''
                                            for (let i = 0; i < shunxu.length; i++) {
                                                shunxu2 += shunxu[i] + ','
                                            }
                                            console.log({id: params.row.id, shunxu: shunxu2})
                                            this.http.deleteProduction(this, {id: params.row.id, shunxu: shunxu2})
                                        }
                                    }
                                }, '移除')/*,
                                h('Button', {
                                    props: {
                                        type: 'text'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    }
                                }, '详情')*/
                            ]);
                        }
                    }
                ],  //  表格列
                data: [],  //  表格数据
                workorder: [],
                sczdata: [],
                current: null,
                ulstyle: false,
                gdlbheight: '',
                stafflist: [
                    {
                        value: '001',
                        label: '房召谋1'
                    },
                    {
                        value: '002',
                        label: '房召谋2'
                    },
                    {
                        value: '003',
                        label: '房召谋3'
                    },
                    {
                        value: '004',
                        label: '房召谋4'
                    },
                    {
                        value: '005',
                        label: '房召谋5'
                    },
                    {
                        value: '006',
                        label: '房召谋6'
                    },
                    {
                        value: '007',
                        label: '房召谋7'
                    }
                ],
                staffdefault: {
                    qd: [],
                    tj: [],
                    fm: [],
                    ft: [],
                    bj: [],
                    fq: [],
                    mq: [],
                    sm: [],
                    pj: [],
                    bz: []
                },
                disabledSingle: true,
                gwmodel: ['zz', 'tj', 'fm', 'ft', 'fq', 'pj', 'bz']
            }
        },
        watch: {
            '$store.state.role': {
                handler: function (val, oldVal) {
                    this.role = this._.find(val, function(chr) {
                        return chr == '1'
                    }) ? true : false
                },
                deep: true
            }
        },
        filters: {
            worktype: function (value) {
                let text = '未知'
                switch (value) {
                    case '1':
                        text = '已生产';
                        break;
                    case '3':
                        text = '未生产';
                        break;
                    case '2':
                        text = '计划中';
                        break;
                    case '5':
                        text = '生产中';
                        break;
                }
                return text
            },
            worktypestyle: function (value) {
                let style = {
                    color: 'red'
                }
                switch (value) {
                    case '1':
                        style.color = '#ccc'
                        break;
                    case '3':
                        style.color = '#0000ff'
                        break;
                    case '2':
                        style.color = '#00ff00'
                        break;
                }
                return style
            }
        },
        methods: {
            addjihua () {
                if (!this.role) {
                    this.$Notice.error({
                        title: '权限不足!',
                        desc: ''
                    });
                    return
                }
                let shunxu = ''
                for (let i = 0; i < this.social.length; i++) {
                    shunxu += this.social[i] + ','
                }
                this.http.addProduction(this, {shunxu: shunxu})
            },
            jihuaupdate () {
                if (!this.role) {
                    this.$Notice.error({
                        title: '权限不足!',
                        desc: ''
                    });
                    return
                }
                let shunxu = ''
                for (let i = 0; i < this.tableindex.length; i++) {
                    shunxu += this.tableindex[i] + ','
                }
                console.log(shunxu, 'shunxu')
                this.http.updateProduction(this, {shunxu: shunxu})
            },
            handleOnstart1 (el) {
                this.table1.oldIndex = el.oldIndex;
                this.table1.hasDragged = true;
                this.table1.isDragging = true;
            },
            handleOnend1 (el) {
                this.table1.newIndex = el.newIndex;
                this.table1.isDragging = false;
                this.table1.draggingRecord.unshift({
                    from: this.table1.oldIndex + 1,
                    to: this.table1.newIndex + 1
                });
                console.log(this.table1.oldIndex, this.table1.newIndex)
                if (this.table1.oldIndex > this.table1.newIndex) {
                    this.tableindex.splice(this.table1.newIndex, 0, this.tableindex[this.table1.oldIndex]);
                    this.tableindex.splice(this.table1.oldIndex + 1, 1)
                } else {
                    this.tableindex.splice(this.table1.newIndex + 1, 0, this.tableindex[this.table1.oldIndex]);
                    this.tableindex.splice(this.table1.oldIndex, 1)
                }
                console.log(this.tableindex)
                //ary.splice(this.table1.oldIndex,1);
            },
            getmodel (val) {
                let index = this._.findIndex(this.gwmodel, function(gwmodel) {
                    return gwmodel == val;
                });
                return index == -1 ? false : true
            },
            add () {
                console.log('customer触发了添加事件')
            },
            editJihua () {
                if (!this.role) {
                    this.$Notice.error({
                        title: '权限不足!',
                        desc: ''
                    });
                    return
                }
                this.jihuaedit = true
            },
            clipboard () {
                let test = {
                    name: '工单列表',
                    id: 'workorder',
                    type: true,
                    url: '/main/workorder/all/key/1'
                }
                this.util.switchHeadTag(this.$parent, test, this.$store.state.tagdata)
            },
            gdxqclick (work) {
                this.current = work
            },
            creatgd () {
            },
            seemore () {
                this.ulstyle = !this.ulstyle
            },
            refresh () {
                this.http.getAllProduction(this, {})
            },
            onCurrentChange (current) {
                console.log(current)
                this.current = current
            }
        },
        components: {
            CardTable,
            MyCard,
            DragableTable
        },
        mounted: function () {
            this.role = this._.find(this.$store.state.role, function(chr) {
                return chr == '1'
            }) ? true : false
            this.gdlbheight = document.getElementById('gdlb').clientHeight + 'px'
            //  this.http.getAllWorkInproduce(this, {})
            this.http.getAllProduction(this, {})

        }
    };
</script>
